<template>
    <div>
        <h2>VantUI 测试</h2>
        <div>
            <van-button type="primary">测试按钮</van-button>
        </div>
        <div>
            <van-icon name="chat-o"></van-icon>
        </div>
        <div>
            <!-- <Icon name="chat-o"></Icon>
            <Icon name="cart-o" color="#1989fa"></Icon> -->
        </div>
        <div>
            <van-cell title="选择单个日期" :value="date" @click="show = true" />
            <van-calendar v-model:show="show" @confirm="onConfirm" />
        
        </div>
    </div>
</template>


<script setup>
    import { ref } from 'vue';
    import { Icon as vanIcon } from 'vant'
    import { Calendar as vanCalendar,Cell as vanCell } from 'vant';

    const date = ref('');
    const show = ref(true);

    const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;
    const onConfirm = (value) => {
      show.value = false;
      date.value = formatDate(value);
    };

</script>

<style lang="scss" scoped>
    
</style>